<template>
	<view>
		<view class="serach">
			<input class="ip" @focus="goSerach" type="text" value="" placeholder="搜索"/>
		</view>
		<swiper style="width: 100%;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item style="width: 100%;" v-for="(item,index) in banner" :key="index">
				<view class="swiper-item">
					<image style="width: 100%;" :src="item.image_src" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="tb">
			<view v-for="(item,index) in Daohang" :key="index" class="dh">
				<image class="im1" style="width: 180rpx;height: 180rpx;" :src="item.image_src" mode=""></image>
			</view>
		</view>
		<view class="goods">
			<div v-for="(item,index) in Ceng" :key="index" class="good">
				<image :src="item.floor_title.image_src" style="height: 60rpx;"></image>
				<van-row>
					<van-col span="8" v-for="(ite,ind) in item.product_list" :key="ind">
						<image :src="ite.image_src" style="width: 240rpx;height: 410rpx;" v-if="ind==0"
						></image>
						<image class="m2" :src="ite.image_src" style="width: 240rpx;height: 200rpx;" v-else
						></image>
					</van-col>
				</van-row>
			</div>
		</view>
	</view>
</template>

<script>
	import {getBanner,getDaoh,getCeng} from '../../api/api.js'
	export default {
		data() {
			return {
				banner:[],
				Daohang:[],
				Ceng:[],
			};
		},
		onLoad() {
			this.Banner()
			this.Daoh()
			this.Cenglist()
			
		},
		methods:{
			async Banner(){
				let res=await getBanner()
				console.log(res)
		        this.banner=res
			},
			async Daoh(){
				let res=await getDaoh()
				console.log('xx',res)
			    this.Daohang=res
			},
			async Cenglist(){
				let res=await getCeng()
				console.log('xxxxx',res)
			    this.Ceng=res
			},
			goSerach(){
				wx.navigateTo({
				  url: '/pages/serach/serach'
				})
			}
			
		}
	}
</script>

<style lang="scss">
.serach{
	height: 100rpx;
	width: 100%;
	background: red;
	overflow: hidden;
}
.ip{
		width: 90%;
		border-radius: 25px;
		color: black;
		background-color: white;
		font-size:10px;
		line-height:25px; 
		height:20px;
		margin: 10px 10px;
		text-align:center;
	}
.hz{
	width: 100%;
}
.tb{
	width: 100%;
	height: 200rpx;
}
.dh{
	width: 100%;
	display:inline;
    
	
}
.im1{
	margin: 10rpx 2rpx;
}
.goods {
	padding: 0 5rpx;
}
.good {
		margin-top: 0rpx;
}
.m2{

	
}
</style>
